<template>
  <div class="list">
    <!-- //发布通知按钮 -->
    <div class="btn">
        <el-row class="mb-4">       
            <el-button type="primary" @click="$router.push('/publish')">+发布通知</el-button>
        </el-row>
    </div>
    <!-- 图表 -->
    <el-table :data="$store.tableData" stripe style="width: 100% ;" :border="true" type="index" @cell-click="rowClick" :cell-style="cellStyle">
        <el-table-column  type="index" width="100" label="序号" align="center"></el-table-column>
        <el-table-column prop="title" label="标题" width="280" align="center" style="color:blue" >
        </el-table-column>
        <el-table-column prop="scope" label="发送范围" width="180" align="center"/>
        <el-table-column prop="sendto" label="发送对象" width="150"  align="center"/>
        <el-table-column prop="name" label="发布者" width="150"  align="center"/>
        <el-table-column prop="datatime" label="发布时间" width="250"  align="center" />
         <!-- 删除按钮 -->
        <el-table-column fixed="right" label="操作" width="130"  align="center">
            <template #default="scope">
                <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.row)">
                删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import {useInformListStore} from '../stores/informlist'
import { onMounted,ref } from 'vue';
//获取仓库数据
let $store= useInformListStore();
onMounted(()=>{  
    if($store.tableData.length!=0){
    }else{
         $store.save_tableData()
    }        
})
//删除数据
let deleteRow=(item)=>{
    console.log('删除执行了')
    $store.del_tableData(item.id)  
}

//跳详情
let $router=useRouter()
let rowClick=(row,column,cell)=>{
console.log(row)
console.log(column)
if(column.label=='标题'){
     $router.push({path:'/details',query:{id:row.id}})
}   
}

//改字体颜色
let cellStyle=({row,column,rowIndex,columnIndex})=>{
    if(columnIndex===1){
        return{
            'text-decoration':'underline',
            color:'rgba(24,144,255,1)'
    }
    }
}

</script>

<style scoped>
.list{
    background-color: white;
    margin-top: 20px;
    box-sizing: border-box;
    padding: 0px 30px 0px;
    text-align: center;
}
.btn{
  display: flex;
  justify-content: flex-end;
  height: 60px;
  align-items: center;
}
</style>